<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bs/css/bootstrap.css">
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>
</head>
<body>
<!--<!DOCTYPE html>-->
<!--<html>-->


<style>
    .layui-btn {
        padding: 0 7px !important;
        font-size: 2px !important;
    }
    .layui-form-label{
        width: 100px !important;
    }
</style>
<div style="margin-top: 1%;">
    <form class="layui-form" action="">

        <div class="layui-form-item ">
            <div class="layui-inline ">
                <label class="layui-form-label">上线时间:</label>
                <div class="layui-input-inline">
                    <input type="text" name="date" id="date" lay-verify="date" autocomplete="off" class="layui-input">
                </div>
            </div>

            <!--<div class="layui-form-item layui-col-xs12">-->
            <div class="layui-inline">
                <label class="layui-form-label">下线时间:</label>
                <div class="layui-input-inline">
                    <input type="text" name="date2" id="date1" lay-verify="date2"  autocomplete="off" class="layui-input">
                </div>
            </div>
            <!--</div>-->


            <div class="layui-inline">
                <button type="button" class="layui-btn">搜索</button>
            </div>
        </div>
    </form>
</div>




<div class="layui-form">
    <div style="padding-left: 50px;">
        <caption style="margin-left: 40px;"><span >
                <button type="button" class="btn btn-primary"  onclick="method5('tableExcel')">
                    <span class="glyphicon glyphicon-folder-open"></span>导出Excel
                </button>
            </span>
        </caption>
    </div>
    <table class="layui-table">
        <colgroup>
            <col width="150">
            <col width="150">
            <col width="200">
            <col>
        </colgroup>
        <thead>
        <tr style="background:#e6e6e6;">
            <th colspan="3">终端列表</th>
            <th style="text-align: right">共有数据：<span>0</span>条</th>
        </tr>

        <tr >
            <th style="width: 25%;">id</th>
            <th style="width: 25%;">上线时间</th>
            <th style="width: 25%;">下线时间</th>
            <th style="width: 25%;">在线时长(天)</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th>2954</th>
            <th>192.168.8.50</th>
            <th>74:8f:1b:39:c8:90</th>
            <th>正常</th>
        </tr>
        <tr>

        </tr>
        <tr>

        </tr>
        <tr>

        </tr>
        <tr>

        </tr>
        </tbody>
    </table>
    <!--<div id="demo"></div>-->
</div>


</body>
<script>
    // layui.use(['laypage', 'layer'], function(){
    //     var laypage = layui.laypage
    //         ,layer = layui.layer;
    //
    //
    //
    //     //总页数大于页码总数
    //     // laypage.render({
    //     //     elem: 'demo'
    //     //     ,count: 70 //数据总数
    //     //     ,jump: function(obj){
    //     //         console.log(obj)
    //     //     }
    //     // });
    //
    //
    //     var data = [
    //         '北京',
    //         '上海',
    //         '广州',
    //         '深圳',
    //         '杭州',
    //         '长沙',
    //         '合肥',
    //         '宁夏',
    //         '成都',
    //         '西安',
    //         '南昌',
    //         '上饶',
    //         '沈阳',
    //         '济南',
    //         '厦门',
    //         '福州',
    //         '九江',
    //         '宜春',
    //         '赣州',
    //         '宁波',
    //         '绍兴',
    //         '无锡',
    //         '苏州',
    //         '徐州',
    //         '东莞',
    //         '佛山',
    //         '中山',
    //         '成都',
    //         '武汉',
    //         '青岛',
    //         '天津',
    //         '重庆',
    //         '南京',
    //         '九江',
    //         '香港',
    //         '澳门',
    //         '台北'
    //     ];

        //调用分页
        // laypage.render({
        //     elem: 'demo20'
        //     ,count: data.length
        //     ,jump: function(obj){
        //         //模拟渲染
        //         document.getElementById('biuuu_city_list').innerHTML = function(){
        //             var arr = []
        //                 ,thisData = data.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit);
        //             layui.each(thisData, function(index, item){
        //                 arr.push('<li>'+ item +'</li>');
        //             });
        //             return arr.join('');
        //         }();
        //     }
        // });

    // });

    //导出表格
    var idTmr;
    function  getExplorer() {
        var explorer = window.navigator.userAgent ;
        //ie
        if (explorer.indexOf("MSIE") >= 0) {
            return 'ie';
        }
        //firefox
        else if (explorer.indexOf("Firefox") >= 0) {
            return 'Firefox';
        }
        //Chrome
        else if(explorer.indexOf("Chrome") >= 0){
            return 'Chrome';
        }
        //Opera
        else if(explorer.indexOf("Opera") >= 0){
            return 'Opera';
        }
        //Safari
        else if(explorer.indexOf("Safari") >= 0){
            return 'Safari';
        }
    }
    function method5(tableid) {
        if(getExplorer()=='ie')
        {
            var curTbl = document.getElementById(tableid);
            var oXL = new ActiveXObject("Excel.Application");
            var oWB = oXL.Workbooks.Add();
            var xlsheet = oWB.Worksheets(1);
            var sel = document.body.createTextRange();
            sel.moveToElementText(curTbl);
            sel.select();
            sel.execCommand("Copy");
            xlsheet.Paste();
            oXL.Visible = true;

            try {
                var fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls");
            } catch (e) {
                print("Nested catch caught " + e);
            } finally {
                oWB.SaveAs(fname);
                oWB.Close(savechanges = false);
                oXL.Quit();
                oXL = null;
                idTmr = window.setInterval("Cleanup();", 1);
            }

        }
        else
        {
            tableToExcel(tableid)
        }
    }
    function Cleanup() {
        window.clearInterval(idTmr);
        CollectGarbage();
    }
    var tableToExcel = (function() {
        var uri = 'data:application/vnd.ms-excel;base64,',
            template = '<html><head><meta charset="UTF-8"></head><body><table>{table}</table></body></html>',
            base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) },
            format = function(s, c) {
                return s.replace(/{(\w+)}/g,
                    function(m, p) { return c[p]; }) }
        return function(table, name) {
            if (!table.nodeType) table = document.getElementById(table)
            var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}
            window.location.href = uri + base64(format(template, ctx))
        }
    })()
</script>


<script>
    layui.use(['form', 'layedit', 'laydate'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate;

        //日期
        laydate.render({
            elem: '#date'
            ,type: 'datetime'
        });
        laydate.render({
            elem: '#date1'
            ,type: 'datetime'
        });
        //这里可以


        //表单赋值
        layui.$('#LAY-component-form-setval').on('click', function(){
            form.val('example', {
                "username": "贤心" // "name": "value"
                ,"password": "123456"
                ,"interest": 1
                ,"like[write]": true //复选框选中状态
                ,"close": true //开关状态
                ,"sex": "女"
                ,"desc": "我爱 layui"
            });
        });

        //表单取值
        layui.$('#LAY-component-form-getval').on('click', function(){
            var data = form.val('example');
            alert(JSON.stringify(data));
        });

    });
</script>

</html>